<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>忘记密码 </title>
    <!-- 引入Vue.js -->
    <script src="../../js/vue.js"></script>
    <!-- 引入Element UI -->
    <link type="text/css" rel="stylesheet" href="../../css/index.css">
    <script src="../../js/index.js"></script>
    <!-- 引入axios -->
    <script src="../../js/axios.min.js"></script>
    <style>
        /* 全局样式重置与基础设置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
        }

        body {
            min-height: 100vh;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            background-attachment: fixed;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        /* 容器样式 */
        .forgot-container {
            width: 100%;
            max-width: 480px;
            background: #ffffff;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .forgot-container:hover {
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
        }

        /* 头部样式 */
        .forgot-header {
            background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
            padding: 28px 20px;
            text-align: center;
            position: relative;
        }

        .forgot-header::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, #4b6cb7, #182848);
        }

        .forgot-header h2 {
            color: #ffffff;
            font-size: 24px;
            font-weight: 500;
            letter-spacing: 0.5px;
            margin: 0;
        }

        /* 表单样式 */
        .forgot-form {
            padding: 30px 35px;
        }

        /* 步骤指示器 */
        .step-indicator {
            display: flex;
            justify-content: space-between;
            margin-bottom: 30px;
            position: relative;
        }

        .step-indicator::before {
            content: '';
            position: absolute;
            top: 12px;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: #e2e8f0;
            z-index: 1;
        }

        .step {
            position: relative;
            z-index: 2;
            text-align: center;
            flex: 1;
        }

        .step-number {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background-color: #e2e8f0;
            color: #718096;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 8px;
            font-size: 12px;
            font-weight: bold;
        }

        .step.active .step-number {
            background-color: #4b6cb7;
            color: white;
        }

        .step.completed .step-number {
            background-color: #48bb78;
            color: white;
        }

        .step-label {
            font-size: 12px;
            color: #718096;
        }

        .step.active .step-label {
            color: #4b6cb7;
            font-weight: 500;
        }

        /* 表单项样式 */
        .el-form-item {
            margin-bottom: 22px;
        }

        .el-input {
            height: 46px;
            border-radius: 6px !important;
            border: 1px solid #e1e5eb !important;
            transition: all 0.2s ease;
        }

        .el-input:hover {
            border-color: #a0aec0 !important;
        }

        .el-input:focus-within {
            border-color: #4b6cb7 !important;
            box-shadow: 0 0 0 3px rgba(75, 108, 183, 0.1) !important;
        }

        .el-input__inner {
            height: 46px !important;
            font-size: 14px;
            padding: 0 14px;
            border: none !important;
            color: #2d3748;
        }

        .el-input__inner::placeholder {
            color: #a0aec0;
        }

        .el-icon-user, .el-icon-message, .el-icon-lock, .el-icon-key {
            color: #a0aec0;
            font-size: 16px;
        }

        /* 验证码容器 */
        .captcha-container, .code-container {
            display: flex;
            gap: 12px;
        }

        .captcha-input, .code-input {
            flex: 1;
        }

        .captcha-image, .code-button {
            width: 110px;
            height: 46px;
            background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            font-weight: 600;
            letter-spacing: 2px;
            color: #4b6cb7;
            cursor: pointer;
            border: 1px solid #e1e5eb;
            transition: all 0.2s ease;
            user-select: none;
        }

        .captcha-image:hover, .code-button:hover {
            background: linear-gradient(135deg, #e4e8f0 0%, #d5dae5 100%);
            border-color: #c3cfe2;
        }

        .code-button:disabled {
            background: #e2e8f0;
            color: #a0aec0;
            cursor: not-allowed;
        }

        /* 按钮样式 */
        .el-button--primary {
            width: 100%;
            height: 48px;
            border-radius: 6px;
            background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
            border: none;
            font-size: 15px;
            font-weight: 500;
            transition: all 0.2s ease;
            letter-spacing: 0.5px;
        }

        .el-button--primary:hover {
            background: linear-gradient(135deg, #405ca3 0%, #14203d 100%);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(75, 108, 183, 0.2);
        }

        .el-button--primary:active {
            transform: translateY(0);
            box-shadow: 0 2px 6px rgba(75, 108, 183, 0.2);
        }

        .el-button--default {
            width: 100%;
            height: 48px;
            border-radius: 6px;
            border: 1px solid #cbd5e0;
            color: #4a5568;
            font-size: 15px;
            font-weight: 500;
            transition: all 0.2s ease;
            margin-top: 10px;
        }

        .el-button--default:hover {
            border-color: #a0aec0;
            background-color: #f8fafc;
        }

        /* 底部链接样式 */
        .footer-links {
            text-align: center;
            padding: 0 35px 30px;
            font-size: 14px;
            color: #718096;
        }

        .footer-links a {
            color: #4b6cb7;
            text-decoration: none;
            transition: all 0.2s ease;
            padding: 4px 8px;
            border-radius: 4px;
            margin-left: 5px;
            font-weight: 500;
        }

        .footer-links a:hover {
            color: #182848;
            background-color: rgba(75, 108, 183, 0.1);
        }

        /* 消息提示框样式优化 */
        .el-message {
            min-width: 300px !important;
            border-radius: 8px !important;
            padding: 14px 18px !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .el-message__content {
            font-size: 14px !important;
        }

        /* 响应式调整 */
        @media (max-width: 520px) {
            .forgot-container {
                max-width: 100%;
            }

            .forgot-form {
                padding: 25px 20px;
            }

            .footer-links {
                padding: 0 20px 25px;
            }
        }
    </style>
</head>
<body>
<!-- 忘记密码容器 -->
<div id="app" class="forgot-container">
    <div class="forgot-header">
        <h2>忘记密码</h2>
    </div>

    <el-form :model="form" ref="form" class="forgot-form" :rules="rules">
        <!-- 步骤指示器 -->
        <div class="step-indicator">
            <div class="step" :class="{ active: step === 1, completed: step > 1 }">
                <div class="step-number">1</div>
                <div class="step-label">验证身份</div>
            </div>
            <div class="step" :class="{ active: step === 2, completed: step > 2 }">
                <div class="step-number">2</div>
                <div class="step-label">重置密码</div>
            </div>
            <div class="step" :class="{ active: step === 3 }">
                <div class="step-number">3</div>
                <div class="step-label">完成</div>
            </div>
        </div>

        <!-- 第一步：验证身份 -->
        <div v-if="step === 1">
            <el-form-item prop="userName">
                <el-input
                        v-model="form.userName"
                        placeholder="请输入用户名"
                        prefix-icon="el-icon-user"
                        clearable>
                </el-input>
            </el-form-item>

            <el-form-item prop="phoneNumber">
                <el-input
                        v-model="form.phoneNumber"
                        placeholder="请输入注册手机号"
                        prefix-icon="el-icon-message"
                        clearable>
                </el-input>
            </el-form-item>

            <el-form-item prop="captcha">
                <div class="captcha-container">
                    <el-input
                            class="captcha-input"
                            v-model="form.captcha"
                            placeholder="请输入验证码"
                            prefix-icon="el-icon-key"
                            clearable>
                    </el-input>
                    <div class="code-button" @click="refreshCaptcha" :disabled="countdown > 0">
                        {{ countdown > 0 ? `${countdown}秒后重发` : '获取验证码' }}
                    </div>
                </div>
            </el-form-item>

            <el-button
                    type="primary"
                    @click="nextStep"
                    :loading="loading">
                下一步
            </el-button>
        </div>

        <!-- 第二步：重置密码 -->
        <div v-if="step === 2">
            <el-form-item prop="password">
                <el-input
                        v-model="form.password"
                        type="password"
                        placeholder="请输入新密码"
                        prefix-icon="el-icon-lock"
                        show-password
                        clearable>
                </el-input>
            </el-form-item>

            <el-form-item prop="confirmPassword">
                <el-input
                        v-model="form.confirmPassword"
                        type="password"
                        placeholder="请确认新密码"
                        prefix-icon="el-icon-lock"
                        show-password
                        clearable>
                </el-input>
            </el-form-item>

            <el-button
                    type="primary"
                    @click="resetPassword"
                    :loading="loading">
                重置密码
            </el-button>
            <el-button @click="step = 1">上一步</el-button>
        </div>

        <!-- 第三步：完成 -->
        <div v-if="step === 3">
            <div style="text-align: center; padding: 30px 0;">
                <i class="el-icon-success" style="font-size: 48px; color: #48bb78;"></i>
                <h3 style="margin: 20px 0 10px; color: #2d3748;">密码重置成功</h3>
                <p style="color: #718096; margin-bottom: 30px;">您的密码已成功重置，请使用新密码登录</p>
            </div>
            <el-button type="primary" @click="goToLogin">立即登录</el-button>
        </div>
    </el-form>

    <div class="footer-links" v-if="step !== 3">
        <a href="/vegetablemarketexpress/html/back/login.html" @click.prevent="goToLogin">返回登录</a>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data() {
            // 1. 自定义验证规则：放在data内，确保能访问this.form
            const validatePassConfirm = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.form.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                step: 1,
                loading: false,
                // 倒计时相关
                countdown: 0,
                timer: null,
                form: {
                    userName: '',
                    phoneNumber: '',
                    captcha: '', // 用户输入的验证码
                    password: '',
                    confirmPassword: ''
                },
                rules: {
                    userName: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                        { min: 3, max: 20, message: '用户名长度需在3-20个字符之间', trigger: 'blur' }
                    ],
                    phoneNumber: [
                        { required: true, message: '请输入手机号', trigger: 'blur' },
                        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
                    ],
                    captcha: [
                        { required: true, message: '请输入验证码', trigger: 'blur' },
                        { len: 4, message: '验证码为4位数字', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入新密码', trigger: 'blur' },
                        { min: 6, max: 32, message: '密码长度需在6-32个字符之间', trigger: 'blur' }
                    ],
                    confirmPassword: [
                        { required: true, validator: validatePassConfirm, trigger: 'blur' }
                    ]
                },
                verifiedUser: null
            }
        },
        // 3. 页面加载时不自动生成验证码
        mounted() {
            // 不再自动获取验证码
        },
        methods: {
            // 发送验证码
            sendCaptcha() {
                if (!this.form.userName || !this.form.phoneNumber) {
                    this.$message.error('请输入用户名和手机号');
                    return;
                }

                this.loading = true;
                const _this = this;

                // 请求发送验证码
                axios.post('/vegetablemarketexpress/user/sendCaptcha', {
                    userName: this.form.userName,
                    phoneNumber: this.form.phoneNumber
                })
                    .then(response => {
                        this.loading = false;
                        if (response.data.code === 200) {
                            this.$message.success('验证码已发送，请注意查收');
                            // 启动60秒倒计时
                            this.startCountdown();
                        } else {
                            this.$message.error(response.data.message || '验证码发送失败');
                        }
                    })
                    .catch(error => {
                        this.loading = false;
                        console.error('验证码发送异常:', error);
                        this.$message.error('网络异常，验证码发送失败');
                    });
            },

            // 倒计时功能 (60秒)
            startCountdown() {
                this.countdown = 60;
                this.timer = setInterval(() => {
                    this.countdown--;
                    if (this.countdown <= 0) {
                        clearInterval(this.timer);
                        this.timer = null;
                    }
                }, 1000);
            },

            // 刷新验证码方法
            refreshCaptcha() {
                // 如果正在倒计时，则不允许刷新
                if (this.countdown > 0) {
                    return;
                }
                this.sendCaptcha();
            },

            // 身份验证：需确保用户输入的form.captcha与后端生成的captcha一致
            nextStep() {
                this.$refs.form.validate((valid) => {
                    if (valid && this.step === 1) {
                        this.loading = true;
                        const _this = this;

                        // 传参时携带用户名、手机号和用户输入的验证码用于验证
                        axios.post('/vegetablemarketexpress/user/verifyUser', {
                            userName: this.form.userName,
                            phoneNumber: this.form.phoneNumber,
                            captcha: this.form.captcha
                        })
                            .then(response => {
                                this.loading = false;
                                if (response.data.code === 200) {
                                    _this.verifiedUser = response.data.data;
                                    _this.step = 2;
                                    _this.$message.success('身份验证成功');
                                } else {
                                    _this.$message.error(response.data.message || '身份验证失败');
                                }
                            })
                            .catch(error => {
                                this.loading = false;
                                console.error('身份验证异常:', error);
                                _this.$message.error('网络异常，请检查网络后重试');
                            });
                    }
                });
            },
            resetPassword() {
                this.$refs.form.validate((valid) => {
                    if (valid && this.step === 2) {
                        this.loading = true;
                        const _this = this;

                        axios.post('/vegetablemarketexpress/user/resetPassword', {
                            userId: this.verifiedUser.userId,
                            password: this.form.password
                        })
                            .then(response => {
                                this.loading = false;
                                if (response.data.code === 200) {
                                    _this.step = 3;
                                    _this.$message.success('密码重置成功');
                                } else {
                                    _this.$message.error(response.data.message || '密码重置失败');
                                }
                            })
                            .catch(error => {
                                this.loading = false;
                                console.error('密码重置异常:', error);
                                _this.$message.error('网络异常，请检查网络后重试');
                            });
                    }
                });
            },
            goToLogin() {
                window.location.href = '/vegetablemarketexpress/html/back/login.html';
            }
        }
    });
</script>

</body>
</html>